<template>
  <div>
    <transition :name="transitionName">
      <router-view class="child-view"></router-view>
    </transition>
    <!--footer-->
    <ul class="footer horizontal-list clear" v-if="footerShow">
      <li><router-link :to="{name:'index'}"><img  src="../assets/img/footer1.png" alt="" v-if="active!=1"><img src="../assets/img/footer1_active.png" alt="" v-else></router-link></li>
      <li><router-link :to="{name:'taotejia'}"><img class="img" src="../assets/img/footer2.png" alt="" v-if="active!=2"><img class="img" src="../assets/img/footer2_active.png" alt="" v-else></router-link></li>
      <li @click="goCollection()"><img class="img" src="../assets/img/footer3.png" alt="" v-if="active!=3"><img class="img" src="../assets/img/footer3_active.png" alt="" v-else></li>
      <li><router-link :to="{name:'user'}"><img  src="../assets/img/footer4.png" alt="" v-if="active!=4"><img src="../assets/img/footer4_active.png" alt="" v-else></router-link></li>
    </ul>
  </div>
</template>
<script>
  export default {
      data () {
        return {
          transitionName: 'slide-left',
          footerShow:true,
          active:1,
          isLogin:''
        }
      },
      beforeRouteUpdate (to, from, next) {
        let isBack = this.$router.isBack;
        if(to.path!='/'&&to.path!='/taotejia'&&to.path!='/cart'&&to.path!='/user'){
            this.footerShow = false
        }else{
            this.footerShow = true
        }
        if(to.path == '/'){
            this.active = 1;
        }else if(to.path == '/taotejia'){
            this.active = 2;
        }else if(to.path == '/cart'){
            this.active = 3;
        }else if(to.path == '/user'){
            this.active = 4;
        }
        if (isBack) {
          this.transitionName = 'slide-right'
        } else {
          this.transitionName = 'slide-left'
        }
        this.$router.isBack = false
        next();
       
      },
      mounted(){ 
          let route = this.$route.path;
          if(route == '/'){
            this.active = 1;
          }else if(route == '/taotejia'){
            this.active = 2;
          }else if(route == '/cart'){
            this.active = 3;
          }else if(route == '/user'){
            this.active = 4;
          }
          if(route!='/'&&route!='/taotejia'&&route!='/cart'&&route!='/user'){
              this.footerShow = false
          }else{
              this.footerShow = true
          }
      },
      methods:{
          goCollection(){
              this.isLogin = localStorage.getItem('token')
            if(this.isLogin){
              this.$router.push({name:'cart'})
            }else{
              this.$router.push({path:'/login',query:{'backUrl':'/user'}})
            }
          }
      }

  }
</script>

<style scoped>
  .child-view {
    position: absolute;
    width:100%;
    transition: all .4s cubic-bezier(.55,0,.1,1);
  }
  .slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(150px, 0);
    transform: translate(150px, 0);
  }
  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-150px, 0);
    transform: translate(-150px, 0);
  }
  .header {
    position:absolute;
    height:44px;
    background:#0058f1;
    width:100%
  }
</style>
